import "./index.less";
import { Button, Tooltip, Input } from "antd";
import DetailDrawer from "@/components/ViewComponents/PatientInformation/components/basicDrawer";
import { useTranslation } from "react-i18next";
import { useDrawer } from "@/components/Drawer";
import { useEffect, useMemo, useRef, useState } from "react";
import { get_patients } from "@/api/components/patientInformation";
import { BasicDescription, useDescription, DescItem } from "@/components/Description";
export default function IndexDrawer(props: any) {
	const { t } = useTranslation();
	const [isLoading, setIsLoading] = useState(true);
	const { patientId, patCardno, successFn, isSearch = true, descriptionColumn = 6 } = props;
	const { Search } = Input;
	const utilA = "viewComponents.patientInformation";
	const [patCardno_A, setPatCardno_A] = useState("");
	const descriptionSchema: DescItem[] = [
		{
			label: t("patientBasic.patient_code"),
			field: "patCardno",
			span: 1,
			render: text =>
				text ? (
					<Tooltip title={text}>
						<span>{text.length > 10 ? String(text).substring(0, 10) + "..." : text}</span>
					</Tooltip>
				) : (
					""
				)
		},
		{
			label: t("patientBasic.full_name"),
			field: "fullName",
			span: 1
		},
		{
			label: t("patientBasic.age"),
			field: "age",
			span: 1
		},
		{
			label: t("patientBasic.gender"),
			field: "gender",
			span: 1
		},
		{
			label: t("patientBasic.birthyear"),
			field: "birthday",
			span: 1
		},
		{
			label: t("patientBasic.ethnicity"),
			field: "ethnicity",
			span: 1
		},
		{
			label: t("patientBasic.pat_address"),
			field: "addrCity",
			span: 1
		},
		{
			label: t("patientBasic.nationality"),
			field: "occupation",
			span: 1
		},
		{
			label: t("patientBasic.phone_numb"),
			field: "phoneNumb",
			span: 1
		},
		{
			label: t("patientBasic.grp_email"),
			field: "emailAddr",
			span: 1
		},
		{
			label: t("patientBasic.house_number"),
			field: "addrHouseno",
			span: 1
		},
		{
			label: t("patientBasic.province_city"),
			field: "addrProvince",
			span: 1
		}
	];

	const [registerDescription, { setDescProps }] = useDescription({
		schema: descriptionSchema,
		column: descriptionColumn
	});

	const [registerDrawer, { openDrawer }] = useDrawer();

	const patientInfo = useRef(null);
	const getData = useMemo(() => {
		return isSearch && patCardno_A
			? { patCardno: patCardno_A }
			: {
					id: patientId,
					patCardno
			  };
	}, [patientId, patCardno, patCardno_A, isSearch]);

	/** Function */
	const handleDetail = () => {
		openDrawer(true, patientInfo);
	};

	const searchChange = (val: string) => {
		if (!val) return;
		setPatCardno_A(val);
	};
	const closeFunc = () => {
		getPatientInfo();
	};
	/** Request */
	const getPatientInfo = () => {
		if (patientId || patCardno || patCardno_A) {
			try {
				setIsLoading(false);
				get_patients(getData).then(res => {
					setDescProps({
						data: res
					});
					patientInfo.current = res || { patCardno: patCardno_A };
					openDrawer(false, patientInfo);
					successFn && successFn(res || { patCardno: patCardno_A });
				});
			} catch (err) {
				console.log(err);
			}
		}
	};

	/** Effect */
	useEffect(() => {
		getPatientInfo();
	}, [patientId, patCardno_A]);
	useEffect(() => {
		patCardno && setPatCardno_A(patCardno);
		patCardno && getPatientInfo();
	}, [patCardno]);
	return (
		<div className="IndexDrawer">
			<div className="modules_header">
				<div style={{ marginBottom: "10px" }}>
					<h3>Ⅰ.{t(`${utilA}.administration`)}</h3>
					{isSearch && (
						<div className="flex">
							<div className="flex-none">{t("patientBasic.patient_code")}：</div>
							<Search
								defaultValue={patCardno}
								placeholder={t("felix_ui.input_patient_code")}
								allowClear
								enterButton={t("felix_ui.search")}
								onSearch={searchChange}
							/>
						</div>
					)}
				</div>

				<Button disabled={isLoading} type="text" style={{ color: "#3CC451" }} onClick={handleDetail}>
					{t(`${utilA}.more`)}
				</Button>
			</div>
			<BasicDescription register={registerDescription}></BasicDescription>
			{!isLoading && (
				<DetailDrawer bodyStyle={{ padding: "10px 5px 0 24px" }} closeFunc={closeFunc} register={registerDrawer}></DetailDrawer>
			)}
		</div>
	);
}
